<template>
	<view class="index" :style="{'height':windowHeight}">
		<clothes></clothes>
		<view class="binding">
			<view class="bindings">
				<view class="bindings-one">
					<view class="bindings-one-left">WIFI名称</view>
					<view class="bindings-one-rig">
						<input type="text" v-model="wifiName" placeholder="请输入WIFI名称"/>
					</view>
				</view>
				<view class="bindings-one">
					<view class="bindings-one-left">WIFI密码</view>
					<view class="bindings-one-rig">
						<input type="text" v-model="wifiPwd" placeholder="请输入WIFI密码"/>
					</view>
				</view>
			</view>
			<view class="bindings-btn" @click="submit">提交</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				windowHeight: "200px", 
				wifiName:'',
				wifiPwd:'',
				
			}
		},
		onLoad() {
			this.GaoDu() //判断手机高度
		},
		onShow() {
			this.queryAuth()	//获取设备状态信息
		},
		methods: {
			queryAuth(){
				const value = uni.getStorageSync('iponeInfo');
				this.$REQ(this.$api.jhFindCurrentStatus, {
					sn: value.deviceNo,
				}, 'POST').then(res => {
					console.log(res)
					this.wifiName = res.data.data.wifiName
					this.wifiPwd = res.data.data.wifiPwd
				}).catch(err => {
					console.log(err)
					uni.showToast({
						duration: 1000,
						title:err.data.msg,
						icon: 'none',
					})
				})
			},
			submit(){
				const value = uni.getStorageSync('iponeInfo');
				this.$REQ(this.$api.jhUpdate, {
					sn: value.deviceNo,
					wifiName:this.wifiName,
					wifiPwd:this.wifiPwd
				}, 'POST').then(res => {
					console.log(res)
					uni.showToast({
						duration: 1000,
						title:res.data.msg,
						icon: 'none',
					})
				}).catch(err => {
					console.log(err)
					uni.showToast({
						duration: 1000,
						title:err.data.msg,
						icon: 'none',
					})
				})
			},
			// 判断手机高度
			GaoDu() {
				console.log('12356')
				// 判断手机页面的高度
				uni.getSystemInfo({

					success: (res) => {
						this.windowHeight = res.windowHeight + "px";
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.index {
		width: 100%;
		height: 100%;
		background: #ECF4FF;
	}
	.binding{
		padding: 25rpx;
	}
	.bindings{
		
		padding: 25rpx 25rpx 0rpx 25rpx;
		background: #fff;
	}
	.bindings-one{
		display: flex;
		padding-bottom: 25rpx;
		border-bottom: 3rpx solid #F3F3F3;
		margin-bottom: 25rpx;
	}
	.bindings-one-left{
		width: 180rpx;
		font-size: 30rpx;
		
	}
	.bindings-one-rig{
		font-size: 28rpx;
	}
	.bindings-one-rig input{
		font-size: 28rpx;
	}
	.bindings-one-rigg{
		display: flex;
		flex-wrap: nowrap;
		justify-content:space-between;
		width: 68%;
	}
	.rig-btn{
		background: #607EF5;
		width: 180rpx;
		height: 70rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 70rpx;
		color: #fff;
		border-radius: 15rpx;
	}
	.bindings-txt{
		font-size: 26rpx;
		color: #E7888A;
		margin-bottom: 80rpx;
	}
	.bindings-btn{
		background: #6C74F1;
		width: 100%;
		margin: auto;
		height: 80rpx;
		border-radius: 100rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		
	}

</style>